<template>
  <div>
    <p>{{ id }}</p>
    <button @click="change()">click</button>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue';
export default {
  setup() {
    let state = reactive({ id: 10 });
    function change() {
      state.id += 1;
      console.log(state.id);
    }
    return {
      //如果只返回state，可以return state但还有其它对象
      //...state , 单向数据绑定,不支持双向数据渲染
      //ES6中的扩展运算符和解构会把双向数据渲染的特性取消,除非用到toRefs来处理
      //toRefs函数可以将reactive创建出来的对象都转化为ref形式的响应式数据
      ...toRefs(state), //转成ref形式的响应式数据
      change, //事件处理函数
    };
  },
};
</script>
